<script lang="ts" setup>
import { ref } from 'vue'
import LoginForm from '@/components/LoginForm.vue'
import Dashboard from '@/components/Dashboard.vue'

// 登录状态，false表示未登录，true表示已登录
const isLoggedIn = ref(false)
// 当前登录的用户名
const currentUsername = ref('')

/**
 * 处理登录成功事件
 * @param username 登录成功的用户名
 */
function handleLoginSuccess(username: string) {
  isLoggedIn.value = true
  currentUsername.value = username
}

/**
 * 处理退出登录事件
 */
function handleLogout() {
  isLoggedIn.value = false
  currentUsername.value = ''
}
</script>

<template>
  <div class="mz-app__sidebar">
    <div class="sidebar-inner">
      <!-- 未登录状态：显示登录表单 -->
      <LoginForm v-if="!isLoggedIn" @login-success="handleLoginSuccess" />

      <!-- 已登录状态：显示登录成功页面 -->
      <Dashboard v-else :username="currentUsername" @logout="handleLogout" />
    </div>
  </div>
</template>

<style scoped>
.mz-app__sidebar {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 300px;
  background-color: #fff;
  border-left: solid 1px #f2f2f2;
  overflow: unset !important;
  overflow-y: auto;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.sidebar-inner {
  padding: 20px 30px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 100%;
  box-sizing: border-box;
}
</style>